<template>
  <div class="main-contain">
    <div id="admin">
      <div class="pos" v-loading="loading">
        <h3 class="sys-title">社区智慧助老服务平台</h3>
        <p class="adminh1">社区管理员申请注册</p>
        <el-form label-width="100px" ref="editForm" :model="editForm" :rules="rules">
          <el-form-item label="真实姓名" prop="realName">
            <el-input size="small" v-model="editForm.realName" auto-complete="off" placeholder="请输入真实姓名"></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="gender">
            <el-radio v-model="editForm.gender" label="男">男</el-radio>
            <el-radio v-model="editForm.gender" label="女">女</el-radio>
          </el-form-item>
          <el-form-item label="手机号" prop="mobile">
            <el-input size="small" v-model="editForm.mobile" placeholder="请输入手机号"></el-input>
          </el-form-item>
          <el-form-item label="身份证号" prop="idNo">
            <el-input size="small" v-model="editForm.idNo" placeholder="社区管理员需要实名制"></el-input>
          </el-form-item>
          <el-form-item label="登录密码" prop="pwd">
            <el-input size="small" type="password" v-model="editForm.pwd" placeholder="请输入登录密码"></el-input>
          </el-form-item>
          <el-form-item style="margin-top: 25px;">
            <el-button type="primary" @click="submitForm('editForm')" icon="el-icon-s-promotion">注册</el-button>
            <el-button type="" @click="backPage()" icon="el-icon-back">返回</el-button>
          </el-form-item>
          <div class="reg-tip">提交注册申请后，需要等待管理员审核通过，才可以登录系统。</div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import {getPersonInfo, AdminRegist, FrontDesignTypeList} from '@/api/api.js'
export default {
  data() {
    return {
      loading: false,
      uploadPicLoadin: false,
      editForm: {
        idNo: '',
        pwd: '',
        realName: '',
        gender: '男',
        mobile: '',
        shopName: '',
        remark: '',
        role: 2,
        status: 0
      },
      // rules表单验证 
      rules: {
        realName: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        pwd: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        mobile: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          {
            pattern: /^1\d{10,10}$/,
            required: true,
            message: '请输入正确的手机号',
            trigger: 'blur'
          }
        ],
        idNo: [{ required: true, message: '请输入', trigger: 'blur' }],
        gender: [{ required: true, message: '请选择性别', trigger: 'blur' }],
      },
      designTypes: [],
      photo: null
    };
  },
  // 注册组件
  components: {
    
  },
  /**
   * 数据发生改变
   */

  /**
   * 创建完毕
   */
  created() {
    //this.getdata(this.formInline)
  },

  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    backPage(){
      this.$router.go(-1)
    },
    submitForm(editData) {
      this.$refs[editData].validate(valid => {
        if (valid) {
          AdminRegist(this.editForm)
            .then(res => {
              this.editFormVisible = false
              this.loading = false
              console.log('注册成功回调', res.data)
              if (res.success) {
                this.$message({
                  type: 'success',
                  message: '注册成功！'
                })
                setTimeout(() => {
                  this.$router.push({ path: '/admin/login' })
                }, 2000)
              } else {
                this.$message({
                  type: 'info',
                  message: res.msg
                })
              }
            })
            .catch(err => {
              this.editFormVisible = false
              this.loading = false
              this.$message.error('注册失败，请稍后再试！')
            })
        } else {
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    
    // 关闭编辑、增加弹出框
    closeDialog() {
      this.editFormVisible = false
      this.editForm.warehouseId = null
    },

    handlePreview(file) {
      console.log(file);
    },
    handleRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    uploadSectionFile(file) {
      console.log('选定图片！')
      this.uploadPicLoading=true
      const typeArr = ["image/png", "image/gif", "image/jpeg", "image/jpg"];
      const isJPG = typeArr.indexOf(file.raw.type) !== -1;
      const isLt3M = file.size / 1024 / 1024 < 3;
      if (!isJPG) {
        this.$message.error("只能是图片!");
        this.files = null;
        this.uploadPicLoading=false
        return;
      }
      if (!isLt3M) {
        this.$message.error("上传图片大小不能超过 3MB!");
        this.files = null;
        this.uploadPicLoading=false
        return;
      }
      this.files = file.raw;
      // FormData 对象
      var formData = new FormData();
      // 文件对象
      formData.append("file", this.files);
      let config = {
        headers: {
          "Content-Type": "multipart/form-data",
        },
        methods: "post",
      };
      axios.post("http://localhost:9081/api/admin/uploadPic", formData, config).then((res) => {
        if (res.data.success) {
          console.log('图片上传成功！', res.data)
          this.photo = res.data.data
          this.editForm.pic = res.data.data
        } else {
          this.$message.error(res.data.message);
        }
        this.uploadPicLoading=false
      });
    },
  }
}
</script>

<style scoped>
.user-search {
  margin-top: 20px;
}
.userRole {
  width: 100%;
}
body {
  background: rgb(135, 206, 235);
}
#admin {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  position: absolute;
  top: 30%;
  left: 50%;
  margin-top: -200px;
  margin-left: -250px;
  width: 500px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 8px 10px 10px rgb(177, 223, 242);
  border: 1px solid #b1dff2;
}
.adminh1 {
  font-size: 18px;
  margin: 18px 0;
  text-align: center;
  color: #59748f;
}
.sys-title{
  text-align: center;
  color: #59748f;
}
.pos {
  padding: 10px 5%;
}
#admin .el-form-item__content{
  margin: 0;
  text-align: center;
}
#admin .el-form-item{
  margin-bottom: 10px;
}
.reg-tip{
  padding: 10px;
  font-size: 14px;
  text-align: center;
  color: #666;
}
.avatar-uploader .avatar{
  width: 160px;
  height: 160px;
}
.img-list .el-icon-plus{
  font-size: 22px;
  padding: 25px;
  border: 1px dashed #ccc;
}
.avatar-uploader .avatar{
  width: 160px;
  height: 160px;
}
</style>